<template>
  <view class="reader__bottom-btns">
    <button
      v-for="btn in buttons"
      :key="btn.key"
      :style="{
        color: themeConfig.menuTextColor,
        background: themeConfig.menuBackground,
        boxShadow: `6rpx 6rpx 8rpx ${themeConfig.menuShadowColor}`
      }"
      class="reader__bottom-btns-item"
      @click.stop="handleBtnClick(btn.key)"
    >{{ btn.name }}</button>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
const BUTTONS = [
  {
    key: "click-pre-chapter",
    name: "上一章"
  },
  {
    key: "click-open-mulu",
    name: "打开目录"
  },
  {
    key: "click-next-chapter",
    name: "下一章"
  }
];

export default {
  data() {
    return {
      buttons: BUTTONS
    };
  },

  computed: {
    ...mapGetters(["themeConfig"])
  },

  methods: {
    handleBtnClick(key) {
      this.$emit(key);
    }
  }
};
</script>

<style lang="scss">
.reader {
  &__bottom-btns {
    margin-top: 60rpx;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;

    &-item {
      width: 200rpx;
      padding: 0 15rpx;
      font-size: 28rpx;
      height: 72rpx;
      line-height: 72rpx;

      &.button-hover {
        transform: translate(1rpx, 1rpx);
      }

      &::after {
        content: "";
        border: none;
      }
    }
  }
}
</style>
